* {
  box-sizing: unset; /* prevent collision with bootstrap */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,1.0);
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
html, body {
  border: 0;
  padding: 0;
  cursor: default;
  overflow: hidden;
  color: var(--text-color);
  background-color: #F5F5F5;
  height: 100%;
}
html, body, input,select,button,textarea{font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px;}
div, td, label, fieldset, textarea, select, input, button, dialog {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
table, tbody, td, tfoot, th, thead, tr {
  /* prevent collision with bootstrap */
  border-collapse: collapse;
  border-color: initial;
  border-style: initial;
  border-width: 1px;
}
fieldset {
  border: 1px solid #D0D0D0;
  border-radius:6px;
  margin: 0.25rem 0;
  padding: 0.25rem 0.5rem;
}
legend {
  color: var(--text-header-color);
  font-weight: bold;
  float: unset; /* prevent collision with bootstrap */
  width: unset; /* prevent collision with bootstrap */
  padding: unset;
  margin: 0 0.5rem;
  font-size: inherit;
}
textarea {
  border: 1px solid #B0B0B0;
  border-radius: 3px;
  margin: 0.25rem 0;
  padding: 0.25rem;
  resize: none;
  width: 100%;
  height: 10rem;
}
label {
  cursor: pointer;
  margin: 0.15rem;
  overflow: hidden;
}
input[type=checkbox], input[type=radio] {margin: 0.25rem;}
select, input[type=file], input[type=text], input[type=number], input[type=password] {
  border: 1px solid #B0B0B0;
  border-radius: 3px;
  margin: 0.25rem auto;
  padding: 0.25rem;
  width: 100%;
}
button, input[type=button], input[type=submit], .Button {
  border: 1px solid #B0B0B0;
  border-radius: 3px;
  margin: 0.25rem;
  padding: 1px 10px;
  background: var(--btn-bg-color) url(../images/h.gif) repeat-x center bottom;
  width: 80px;
  text-wrap: nowrap;
}
button:disabled, input[type=button]:disabled, a.Button:disabled {
  opacity: 0.3;
  cursor: default;
}
button:not(:disabled):hover, input[type=button]:not(:disabled):hover, a.Button:not(:disabled):hover {
  background-color: #F5F5F5;
}
button:not(:disabled):active, input[type=button]:not(:disabled):active, a.Button:not(:disabled):active {
  background-color: #FAFAFA;
}
#gcont span, #lcont span {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.light-theme { color-scheme: light; }
.dark-theme { color-scheme: dark; }
:root {
  --text-color: #000000;
  --text-header-color: var(--text-color);

  --menu-color: #000000;
  --menu-background-color: #ffffff;
  --menu-border-color: #d0d0d0;

  --menu-disabled-color: #c0c0c0;
  --menu-disabled-background-color: #ffffff;

  --menu-highlight-color: #ffffff;
  --menu-highlight-background-color: #cfdeef;
  --menu-active-color: #000000;
  --menu-item-active-icon: url();
  --menu-item-exp-icon: url();

  --menu-connect-line-color: #909090;
  --menu-connect-line-style: dotted;

  --container-bg-color: #ffffff;
  --container-border-color: #a0a0a0;
  --btn-bg-color: #F0F0F0;
  --header-bg-color: #F0F0F0;
  --header-border-color: #909090;
  --footer-height: 25px;
  --footer-bg-color: #ffffff;
  --footer-bg-image: none;
  --footer-border-color: #a0a0a0;
  --dialog-bg-color: #FAFAFA;
  --dialog-border-color: #909090;

  --navbar-height: 36px;
  --navbar-bg-color: #f0f0f0;
  --navbar-bg-image: url(../images/t_bg.png);
  --navbar-border-color: #d0d0d0;
  --navbar-item-bg-color: #f0f0f0;
  --navbar-item-border-color: #a0a0a0;
  --loading-indicator-icon: url(../images/ajax-loader.gif);
  --loading-indicator-side-length: 32px;
}
#StatusBar {
  --pane-up-icon: url();
  --pane-down-icon: url();
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--menu-border-color);
  --bs-dropdown-bg: var(--menu-background-color);
  --bs-dropdown-link-color: var(--menu-color);
  --bs-dropdown-link-active-color: var(--menu-highlight-color);
  --bs-dropdown-link-active-bg: var(--menu-highlight-background-color);
  --bs-dropdown-link-hover-color: var(--menu-highlight-color);
  --bs-dropdown-link-hover-bg: var(--menu-highlight-background-color);
}
.list-group {
  --bs-list-group-border-color: transparent;
  --bs-list-group-border-width: 0;
  --bs-list-group-bg: var(--menu-background-color);
  --bs-list-group-color: var(--menu-color);
  --bs-list-group-active-color: var(--menu-highlight-color);
  --bs-list-group-active-border-color: transparent;
  --bs-list-group-active-bg: var(--menu-highlight-background-color);
  --bs-list-group-action-hover-color: var(--menu-highlight-color);
  --bs-list-group-action-hover-bg: var(--menu-highlight-background-color);
  --bs-list-group-action-active-color: var(--menu-highlight-color);
  --bs-list-group-action-active-bg: var(--menu-highlight-background-color);
  --bs-list-group-item-padding-x: 0.25rem;
  --bs-list-group-item-padding-y: 0.25rem;
}
a.dropdown-item {
  width: auto;
}
category-list.rightalign-labelsize panel-label::part(size) {
  margin-left: auto;
}
category-list.hide-textoverflow panel-label::part(text) {
  overflow: hidden;
  text-overflow: ellipsis;
}
dialog {
  background-color: var(--dialog-bg-color);
  border-color: var(--menu-border-color);
}
form{margin:0;}
div#preload {background-image: url(../images/toolbar.png); background-image: url(../images/tstatus.png); background-image: url(../images/t_bg.png); background-image: url(../images/r_bg.gif); background-image: url(../images/i_bg.gif); background-image: url(../images/close.png); background-image: url(../images/file.gif); background-image: url(../images/dir.gif);}
div#cover {z-index: 500; background: #FFFFFF}
div#msg {top: 50%; margin-top: -50px; line-height: 100px; font-weight: bold; background: #FDFDFD; border-top: 1px solid #D0D0D0; border-bottom: 1px solid #D0D0D0}
.pre-theme-load.dark-theme div#cover { background: #181818; }
.pre-theme-load.dark-theme div#msg { color: #fff; background: #151515; border-color: #333; }
.pre-theme-load.dark-theme #loadimg { filter: invert(1); }
div#modalbg {left: 0px; top: 0px; z-index: 500; display: none; opacity: 0.5; background-color: #CCCCCC;}
.konqueror div#modalbg { background: none; }

.dlg-window {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: var(--dialog-bg-color);
  color: var(--text-color);
  border: 2px solid var(--dialog-border-color);
  border-radius: 8px;
  outline: 0px solid transparent;
  display: flex;
  flex-direction: column;
  max-width: 95dvw;
  max-height: 95dvh;
}
.dlg-window .row {
  margin: 0.5rem 0;
  padding: 0;
}
.dlg-window .row > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.25rem;
  margin-bottom: 0.1rem;
}
.dlg-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  padding: 0.5rem;
  color: var(--text-header-color);
  background-color: var(--header-bg-color);
  border-bottom: 1px solid var(--header-border-color);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dlg-header > div:first-child {
  line-height: 2rem;
  font-weight: bold;
  padding-left: 2rem;
  background: no-repeat scroll 0.15rem center;
}
a.dlg-close:link, a.dlg-close:visited {
  display: block;
  height: 14px;
  width: 14px;
  margin: auto 0.5rem;
  background: transparent url(../images/close.png) no-repeat scroll left center;
}
a.dlg-close:hover {background-position-x: -14px;}
a.dlg-close:active {background-position-x: -28px;}

div#sc {width: 150px; right: 57px; top: 40px; position: absolute; display: none; border: 1px solid #808080; background-color: #E0E0E0; z-index: 100}
div#sc ul {margin: 0; padding: 0; list-style: none}
div#sc ul li {margin: 0; padding: 0}
div#sc li div {line-height: 14px; padding: 4px; font-weight: bold; font-size: 11px;}
div#sc li.se_act div {background-color: #808080; color: #FFFFFF}

.CMenu {
  position: absolute;
  display: none;
  border: 2px ridge var(--menu-border-color);
  border-radius: 5px;
  background: var(--menu-background-color);
  padding: 0.25rem 0;
  margin: 0;
  list-style-type: none;
  z-index: 1000
}
.CMenu li {
  display: block;
  position: relative;
}
.CMenu li:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.CMenu li:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.CMenu li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.25rem;
  font-weight: normal;
  color: var(--menu-color);
  border-radius: inherit;
  white-space: nowrap;
}
.CMenu li a.sel {
  color: var(--menu-active-color);
}
.CMenu li a::before, .CMenu li a::after {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}
.CMenu li a.sel::before {
  background-image: var(--menu-item-active-icon);
}
.CMenu li a.exp::after {
  background-image: var(--menu-item-exp-icon);
  margin-left: auto;
}
.CMenu li a.dis {
  color: var(--menu-disabled-color);
}
.CMenu li hr {
  width: auto;
  margin: 0.25rem;
  border-color: var(--menu-border-color);
  opacity: 0.75;
}
.CMenu li a:not(.dis):hover {
  background-color: var(--menu-highlight-background-color);
  color: var(--menu-highlight-color);
}

ul.CMenu li:hover ul {display: block; top: 0;}
ul.CMenu li:hover ul li ul {display: none;}
ul.CMenu li:hover ul.left {left: -150px}

span.htkey {text-align:right; position: absolute; right: 16px; z-index:100}
#sel {width: 0px; height: 0px; left: 0px; top: 0px; border: 1px dotted #000000; display: none; z-index: 1000}

#t {
  height: var(--navbar-height);
  background: var(--navbar-bg-image);
  background-color: var(--navbar-bg-color);
  background-position: center;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--navbar-border-color);
  margin-bottom: 5px;
  white-space: nowrap;
}
#toggler-container {
  min-height: 100%;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
}
#top-menu.show, #top-menu.collapsing {
  background-color: var(--menu-background-color);
  border-bottom: 1px solid var(--navbar-border-color);
  z-index: 30;
  max-height: calc(100dvh - var(--navbar-height));
  overflow-y: auto;
}
#top-menu .btn-group {
  flex-direction: column;
  justify-content: center;
}
.dropdown-toggle span {
  /* Push dropdown triangle to the right end */
  margin-right: auto;
}
#t .dropdown-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem;
}
.navbar-toggler {
  background-color: var(--btn-bg-color);
  width: 5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navbar-toggler > div {
  width: 16px;
  height: 16px;
}
#t .nav-link:hover {
  filter: brightness(1.3);
}
#t .nav-link:active {padding: 0.35rem 0.15rem 0.15rem 0.35rem;}
div#t div.TB_Separator {
  align-self: stretch;
  flex: 0 0 1px;
  margin: 0.25rem;
  padding: 0;
  border: 0;
  background-color: #A0A0A0;
}
#t .nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  border: 1px solid var(--navbar-item-border-color);
  border-radius: 8px;
  background: var(--navbar-item-bg-color);
  padding: 0.25rem;
  margin: 0.15rem;
}
div.navbar-nav div.nav-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
div#add, div#remove, div#start, div#pause, div#stop, div#search, div#rss, div#setting {background-image: url(../images/toolbar.png);}
div#add {background-position-x: -24px;}
div#remove {background-position-x: -72px;}
div#start {background-position-x: -96px;}
div#pause {background-position-x: -120px;}
div#stop {background-position-x: -144px;}
div#search {background-position-x: -216px;}
div#rss {background-position-x: -240px;}
div#setting {background-position-x: -264px;}
div#moveu {background: url(../images/toolbar.png) -168px center}
div#moved {background: url(../images/toolbar.png) -192px center}
div#help {background: url(../images/quest.gif) 0px center}
div#plugins {background: url(../images/plugin.png) 0px center}
#go {background: url(../images/go.gif) 0px center; }

#ind {
  background: transparent var(--loading-indicator-icon) no-repeat center;
  background-size: var(--loading-indicator-side-length);
  width: var(--loading-indicator-side-length);
  height: var(--loading-indicator-side-length);
}

#pview_save_view_button { align-self: center; width: 38px; height: 19px; padding: 0px; line-height: 2px; font-size: 19px;  }

a {color: #686868; text-decoration: none;}
#maincont {height: calc(100dvh - var(--navbar-height) - 5px - var(--footer-height) - 5px);}
.offcanvas-header .btn-close {background-color: var(--btn-bg-color);}
#offcanvas-sidepanel {
  border: 1px solid var(--container-border-color);
  background-color: var(--container-bg-color) !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
}
.offcanvas-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1 !important;
  overflow-y: auto !important;
}
#CatList {
  flex: 1 1 auto;
}
#list-table {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--container-border-color);
  background-color: var(--container-bg-color);
}

div#HDivider, div#VDivider {flex: 0 0 5px;}

#stg {
  width: 95vw;
  height: 95vh;
}
#stg_c {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
#stg-pages {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}
#stg-header {background-image: url(../images/settings.gif);}

#stg .lm {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  background-color: var(--menu-background-color);
  border: 1px solid var(--menu-border-color);
  border-radius: 0 0 0 6px;
  overflow: hidden auto;
}

#stg .list-group-item {
  width: auto;
  margin-left: 0.75rem;
  line-height: 1.5rem;
}
#stg .list-group-item::before {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  left: -0.8rem;
  width: 0.8rem;
  height: 2rem;
  border-left: 1px var(--menu-connect-line-style) var(--menu-connect-line-color);
  border-bottom: 1px var(--menu-connect-line-style) var(--menu-connect-line-color);
}
#stg .list-group-item:first-child::before {
  top: 0;
  height: 1rem;
}
.stg_con {
  margin-bottom: auto;
  overflow: hidden auto;
}
.stg_con legend {
  position: sticky;
  top: 0;
  background-color: var(--dialog-bg-color);
}
.stg_con table {width: 100%}
.stg_con td {font-weight: normal; height: 19px}
.stg_con td.alr {text-align: right}
.stg_con td:first-child {
  text-wrap: nowrap;
  text-align: right;
  font-weight: bold;
  padding-right: 0.5rem;
}
.stg_con th {
  text-align: center;
  font-weight: bold;
  text-wrap: nowrap;
}
input.disabled, button.disabled {background-color: #FAFAFA; color: #C0C0C0; border: 1px solid #C0C0C0}
td.disabled, label.disabled, span.disabled, div.disabled {color: #C0C0C0; cursor: default}
div.indent {padding-left: 16px}
select.cols {border: 1px solid #808080; font-size: 11px;  padding: 2px; width: 120px}
div#tdetails {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: #F5F5F5;
}
div#tdetails a.h {margin: 0}
#tdcont {
  background: var(--container-bg-color);
  border: 1px solid var(--container-border-color);
}
div.tab {
  height:100%;
  background: #F5F5F5;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
div#lcont {line-height: 1rem; background: #FFFFFF}
div#lcont div.mono {font-family: monospace; line-height: 1rem; background: #F5F5F5; white-space: pre}
div#lcont .std {padding: 2px}
#clear_log {
  position: fixed;
  bottom: 4rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-image: none;
}

div#gcont span.det-hdr {font-weight: bold;}
div#gcont div.row.Header {font-size: 14px; font-weight: bold; background: #FCFCFC; padding: 0.5rem;}
div#gcont div.row:not(.Header) {padding: 0 0.3rem; word-break: break-all;}
div#gcont div.row > div {padding-top: 0.25rem; padding-bottom: 0.25rem;}

div.graph_tab {
  height: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
  display: block;
  -moz-user-focus: normal;
  -moz-user-input: enabled;
  line-height: 11px;
  color: #545454;
}
.graph_tab_grid,.graph_tab_legend {display: none;}
.graph_tab_grid { background-color: transparent; border: 2px solid #545454; }
.graph_tab_legend { background-color: #F0F0F0; border: 0px none transparent; }
.graph_tab_tooltip { position: absolute; border: 1px solid #fdd; padding: 2px; background-color: #fee; color: black; font-size: 11px; font-weight: bold; font-family: Tahoma, Arial, Helvetica, sans-serif; opacity: 0.80; }

div.table_tab {
  -moz-user-focus: normal;
  -moz-user-input: enabled;
}

.cont {
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.tabbar li.nav-item a.nav-link {
  padding: 0.3rem;
  margin-left: 0.2rem;
  border: 1px solid #D0D0D0;
  border-bottom: none;
  background-color: #FFFFFF;
  color: unset;
  text-wrap: nowrap;
}
.tabbar li.nav-item a.nav-link:hover {
  border-top: 2px solid #FFC73C;
  color: unset;
}
.tabbar li.nav-item.selected a.nav-link {
  border-top: 2px solid #FFC73C;
  color: unset;
}

#dlgLabel {max-width: 350px;}
#dlgLabel-header {background-image: url(../images/label.gif)}
#padd {width: 250px;}
#padd-header {background-image: url(../images/props.gif)}
#dlgAbout {max-width: 300px;}
#dlgAbout-header {background-image: url(../images/about.gif)}
#dlgHelp {max-width: 300px;}
#dlgHelp-header {background-image: url(../images/about.gif)}

#dlgProps {max-width: 450px;}
#dlgProps-header {background-image: url(../images/props.gif)}
#prop-trackers {width: 100%; height: 70px; background: #FFFFFF; border: 1px solid #D0D0D0}
#prop-seed_ratio {width: 40px}

#yesnoDlg {width: 280px; height: auto; min-height: 100px}
#yesnoDlg-header {background-image: url(../images/error.gif)}

span#loadimg {padding: 20px; background: transparent url(../images/ajax-loader.gif) no-repeat center center; }
.webkit div#msg {position: fixed;}
.konqueror div#msg {position: fixed;}

#tadd-header {background-image: url(../images/world.gif)}
#randomize_hash {accent-color: red;}

.konqueror div#tadd label { width: 80px; }
.konqueror div#tadd { height: 290px; }
.konqueror #st_con { height: 340px; overflow: auto; }

#StatusBar {
  height: var(--footer-height);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: start;
  border-top: 1px solid var(--footer-border-color);
  background-color: var(--footer-bg-color);
  background-image: var(--footer-bg-image);
  margin-top: 5px;
  color: #000000;
  white-space: nowrap;
}
#StatusBar .icon {
  height: 16px;
  width: 16px;
  margin: 0 0.25rem;
  background-size: contain;
}
#st_up .icon {
  background-image: var(--pane-up-icon);
}
#st_down .icon {
  background-image: var(--pane-down-icon);
}
.status-cell {
  padding: 0 0.25rem;
  margin: 0;
  border-right: dotted 1px var(--footer-border-color);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sthdr { font-weight: bold; padding-right: 3px; text-align: right; }
.stval {
  padding-right: 3px;
  overflow: hidden;
  min-width: 3rem;
}
#decimalDigitEdit input[type=number] {
  min-width: 3rem;
}
.buttons-group-row {margin: 0.25rem; gap: 0.25rem; display: flex; flex-direction: row;}

#servertime { text-align: center }
#viewrows { text-align: center; }

/* Custom break point settings for responsiveness */

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */
/* Custom rules for medium devices */
div#tadd {max-width: 95vw;}
.dlg-window .buttons-list {
  margin: 0.5rem;
  gap: 0.25rem;
  display: flex;
  flex-direction: row;
  justify-content: start;
  flex-wrap: wrap;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  /* Custom rules for small devices */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  /* Custom rules for medium devices */
  #top-menu.collapsing {
    /*
      prevent top menu blinking when:
      1) switching from mobile to desktop
      AND
      2) the collapsible menu was open before switching.
    */
    display: none !important;
  }
  #t .nav-link:hover {
    background: transparent url(../images/tb_bg.gif) no-repeat scroll left center;
    filter: none;
  }
  #t .nav-link {
    border: transparent;
    background: transparent;
  }
  div#HDivider {cursor: e-resize;}
  div#VDivider {cursor: n-resize;}
  div#HDivider:hover, div#VDivider:hover {background: #A0A0A0;}
  div#tadd {min-width: 600px;}
  .dlg-window .buttons-list {
    margin: 1rem 0.5rem;
    justify-content: end;
  }
  #stg {
    width: 660px;
    height: 600px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  /* Custom rules for large devices */
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  /* Custom rules for x-large devices */
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  /* Custom rules for xx-large devices */
}
